<template>
<div>
  <el-card style="width: 400px;margin: 50px auto 0">
    <div id="info">
    <h1><i class="el-icon-arrow-left" @click="rollBack"></i>个人基本信息</h1>
    <el-divider></el-divider>
      <div style="text-align: center"><el-avatar :src="userInfo.avatar" :size="100"></el-avatar></div>
    <p>用户名: <span>{{userInfo.username}}</span></p>
    <p>昵称: <span>{{userInfo.nickname}}</span></p>
    <p>性别: <span>{{userInfo.gender}}</span></p>
    <p>出生日期: <span>{{userInfo.birthday}}</span></p>
    <p>电话: <span>{{userInfo.phone}}</span></p>
    <p>邮箱: <span>{{userInfo.email}}</span></p>
    <p>地址: <span>{{userInfo.address}}</span></p>
    </div>
  </el-card>
</div>
</template>

<script>
export default {
 data(){
   return{
     userInfo:{
       username:''
     }
   }
 },
  created() {
    this.userInfo=JSON.parse(sessionStorage.getItem("user"))
    console.log(this.userInfo.avatar)
  },
  methods:{
    rollBack(){
      history.back()
    }
  }
}
</script>

<style>
#info>p {
  font-size: 20px;
  font-weight: bold;
  margin-left: 20px;
}
#info>p>span {
  font-weight: lighter;

}
</style>